<template>
	<div>
		<!-- 面包屑导航系统 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>客户系统</el-breadcrumb-item>
			<el-breadcrumb-item>网络追踪</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<!-- 表单 -->
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="学员名称">
					<el-input v-model="formInline.StudentName" style="width: 100px;" placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="跟踪者">
					<el-select style="width: 100px;margin-left: 15px;" v-model="formInline.UserId" placeholder="">
						<el-option label="请选择" value=""></el-option>
						<el-option v-for="item in pageUserlist" :label="item.LoginName" :value="item.Id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="开始时间">
					<el-date-picker v-model="formInline.createTimeStat" style="width: 145px;" type="datetime" placeholder="选择日期时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间">
					<el-date-picker v-model="formInline.createTimeEnd" style="width: 145px;" type="datetime" placeholder="选择日期时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="回访情况">
					<el-select style="width: 206px;" v-model="formInline.FollowState" placeholder="">
						<el-option label="请选择" value=""></el-option>
						<el-option label="思量" value="思量">思量</el-option>
						<el-option label="上门未报名" value="上门未报名">上门未报名</el-option>
						<el-option label="报名未进班" value="报名未进班">报名未进班</el-option>
						<el-option label="未上门" value="未上门">未上门</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="跟踪方式">
					<el-select style="width: 206px;" v-model="formInline.FollowType" placeholder="">
						<el-option label="请选择" value=""></el-option>
						<el-option label="面谈" value="面谈">面谈</el-option>
						<el-option label="电话" value="电话">电话</el-option>
						<el-option label="网络" value="网络">网络</el-option>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button  @click="onSubmit">查询</el-button>
					
				</el-form-item>
				<el-form-item>
					<el-button  @click="dialogFormAddVisible = true">新增</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格数据 -->
			<template>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="Id" label="序列">
					</el-table-column>
					<el-table-column prop="StudentName" label="学生姓名">
					</el-table-column>
					<el-table-column prop="FollowTime" label="跟踪时间">
					</el-table-column>
					<el-table-column prop="FollowState" label="回访情况">
					</el-table-column>
					<el-table-column prop="FollowType" label="跟踪方式">
					</el-table-column>
					<el-table-column prop="Content" label="内容">
					</el-table-column>
					<el-table-column prop="NextFollowTime" label="下次跟踪时间">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope" style="text-align: center;">
							<el-button ty pe="primary" @click="Select(scope.row)">查看</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
			 :page-sizes="[5, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="count">
			</el-pagination>
		</el-card>
		<!-- 查看 -->
		<el-dialog title="查看跟踪" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="学生姓名" :label-width="formLabelWidth">
					<el-input disabled v-model="form.StudentName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="跟踪时间" :label-width="formLabelWidth">
					<el-input disabled v-model="form.FollowTime" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="下次跟踪时间" :label-width="formLabelWidth">
					<el-input disabled v-model="form.NextFollowTime" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="内容" :label-width="formLabelWidth">
					<el-input type="textarea" :rows="3" maxlength="1000" disabled v-model="form.Content">
					</el-input>
				</el-form-item>
				<el-form-item label="回访情况" :label-width="formLabelWidth">
					<el-input disabled v-model="form.FollowType" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="跟踪状态" :label-width="formLabelWidth">
					<el-input disabled v-model="form.FollowState" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="创建时间" :label-width="formLabelWidth">
					<el-input disabled v-model="form.CreateTime" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 新增 -->
		<el-dialog title="新增跟踪" :visible.sync="dialogFormAddVisible">
			<el-form :model="formAdd">
				<el-form-item label="学生姓名" :label-width="formLabelWidth">
					<el-select v-model="formAdd.StudentId" placeholder="请选择学生姓名" @change="SelesctAsker">
						<el-option v-for="item in pageStudentlist" :label="item.Name" :value="item.Id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="内容" :label-width="formLabelWidth">
					<el-input type="textarea" :rows="3" maxlength="1000" v-model="formAdd.Content">
					</el-input>
				</el-form-item>
				<el-form-item label="回访情况" :label-width="formLabelWidth">
					<el-select v-model="formAdd.FollowState" placeholder="请选择回访情况">
						<el-option label="思量" value="思量">思量</el-option>
						<el-option label="上门未报名" value="上门未报名">上门未报名</el-option>
						<el-option label="报名未进班" value="报名未进班">报名未进班</el-option>
						<el-option label="未上门" value="未上门">未上门</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="跟踪状态" :label-width="formLabelWidth">
					<el-select v-model="formAdd.FollowType" placeholder="请选择跟踪状态">
						<el-option label="面谈" value="面谈">面谈</el-option>
						<el-option label="电话" value="电话">电话</el-option>
						<el-option label="网络" value="网络">网络</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormAddVisible = false">取 消</el-button>
				<el-button type="primary" @click="getAdd()">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 查询数据
				formInline: {
					StudentName: '',
					createTimeStat: '',
					UserId: '',
					createTimeEnd: '',
					FollowType: '',
					FollowState: ''
				},
				// 追踪者数据
				pageUserlist: [],
				// 用户数据
				pageUserlist: [],
				// 学生数据
				pageStudentlist: [],
				//表格数据
				tableData: [],
				//分页
				page: 0,
				limit: 10,
				count: 0,
				dialogFormVisible: false,
				form: {},
				formLabelWidth: '100px',
				dialogFormAddVisible: false,
				formAdd: {
					StudentId: '',
					Content: '',
					StudentName: '',
					UserId: '',
					FollowType: '',
					FollowState: ''
				},

			}
		},
		created: function() {
			this.getPageUser();
			this.getTableList();
			this.pageStudentlists();
		},
		methods: {
			onSubmit() {
				this.getTableList();
			},
			handleSizeChange(val) {
				this.limit = val;
				this.getTableList();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getTableList();
			},
			//获取学生
			async pageStudentlists() {
				const {
					data: res
				} = await this.$http.get('api/NetFol/GetStudentList')
				this.pageStudentlist = res.data;
			},
			//获取咨询师
			async pageUserlists() {
				const {
					data: res
				} = await this.$http.get('api/NetFol/GetUserList')
				this.pageUserlist = res.data;
			},
			//获取咨询师
			async getPageUser() {
				const {
					data: res
				} = await this.$http.get('api/NetFol/pageUserlist')
				this.pageUserlist = res.data;
			},
			//获取数据
			async getTableList() {
				const {
					data: res
				} = await this.$http.get('api/NetFol/GetTableList', {
					params: {
						page: this.page,
						limit: this.limit,
						studentName: this.formInline.StudentName,
						createTimeStat: this.formInline.createTimeStat,
						userid: this.formInline.UserId,
						createTimeEnd: this.formInline.createTimeEnd,
						followType: this.formInline.FollowType,
						followState: this.formInline.FollowState
					}
				})
				this.tableData = res.data;
				this.count = res.count;
			},
			Select(row) {
				this.form = row;
				this.dialogFormVisible = true;
			},
			//新增
			async getAdd() {
				if (this.formAdd.StudentId == "") {
					this.$message.error("请选择学生！")
				} else {
					const {
						data: res
					} = await this.$http.post('api/NetFol/GetAddList', this.formAdd)//连接NetFol控制器中的GetAddList  新增的接口
					if (res.code == 0) {
						this.$message.success(res.msg);
						this.dialogFormAddVisible = false;
						this.getTableList();
					} else {
						this.$message.success(res.msg);
					}
				}
			},
			//切换学生获取的值
			async SelesctAsker() {
				const {
					data: res
				} = await this.$http.post('api/NetFol/SelectAsker', this.formAdd)
				this.formAdd.StudentName = res.data.Name;
				this.formAdd.UserId = res.data.AskerId;
			}
		}
	}
</script>

<style>
</style>


</style>
